import * as echarts from '../../../../ec-canvas/echarts';
import { getComacGague } from '../../../../api/getData.js'
// const systemInfo = wx.getSystemInfoSync();
// const App = getApp();
// let mychartDomLine;
Component({
  data: {
    ec: {
      lazyload: true
    },
    username: '',
    moduleID: '',
    axisLineColor: [[0.5, '#8E939E'], [0.75, '#8E939E'], [1, '#8E939E']],
    deviceRuntime: '',
    useRuntime: '',
  },
  ready() {},
  pageLifetimes: {
    show() {
      // mychartDomLine = null
    }
  },
  methods: {
    // initEchartObj(){
    //   mychartDomLine = null
    // },
    // initMychartDomLine(canvas, width, height){
    //   mychartDomLine = echarts.init(canvas, null, {
    //       width: width,
    //       height: height
    //     });

    // },
  countEcharts(data) {
    this.setData({
      username: wx.getStorageSync('username'),
      moduleID: wx.getStorageSync('moduleList_new')[0] ? wx.getStorageSync('moduleList_new')[0].moduleID : wx.getStorageSync('moduleList')[0].moduleID
    });
    // let mychart = this.selectComponent("#mychart-dom-line");
    // mychart.init((canvas, width, height) => {
      
    //   // if (!mychartDomLine){
    //   // this.initMyQchartDomLine(canvas, width, height)
    //   // }
    //   const mychartDomLine = echarts.init(canvas, null, {
    //     width: width,
    //     height: height
    //   });
      if (this.data.moduleID === "health") {
        this.getLineOptionDecro(data.result)
      } else if (this.data.moduleID === "health_comac") {
        let timer=null,wait=0;
        const fn=()=>{
          let trendcurveData = wx.getStorageSync('comacTrendcurve').result;
          if(trendcurveData){
            this.getLineOptionComac(data.result,trendcurveData)
            clearTimeout(timer);
          }else{
            wait++;
            if(wait<10){
              timer=setTimeout(fn, 1000);
            }else{
              clearTimeout(timer);
              console.error('等待超时！')
            }
          }
        }
        fn();
      } else if (this.data.moduleID === "health_tobaccoxiamen") {
        this.getLineOption(data.result)
      } else if (this.data.moduleID === "health_motor") {
        this.getLineOptionPgtj(data.result)
      } else if (this.data.moduleID === "healthComacLathe") {
        // comac账号的车床
        getComacGague(data.result.deviceID).then(res => {
          if (res.resCode === 'SUCCESS') {
            let lableName = res.result.currentStatus
            this.setData({
              deviceRuntime: res.result.deviceRuntime,
              useRuntime: res.result.useRuntime,
            })
            this.getBar(lableName)
          }
        })
      }
    // })
  },
  // comac账号的车床
  getBar(lableName) {
    let mychart = this.selectComponent("#mychart-dom-line");
    mychart.init((canvas, width, height) => {
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption({
        series: [
          // 灰色底盘
          {
            type: "pie",
            data: [0],
            radius: [0, '65%'],
            animation: false,
            color: "#6B6E7B",
            silent: true,
            emphasis: {
              itemStyle: {
                color: "#6B6E7B"
              }
            },
            labelLine: {
              show: false
            },
            z: 1
          },
          {
            type: 'gauge',
            animation: false,
            data: [0],
            splitNumber: 5,
            startAngle: 240,
            endAngle: -60,
            radius: '82%',
            silent: true,
            axisLine: {
              lineStyle: {
                width: 8,
                color: this.data.axisLineColor
              }
            },
            axisLabel: {
              show: false,
              distance: -55,
              textStyle: {
                fontSize: '14',
              },
              rich: {}
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            pointer: {
              show: false,
              width: 50,
              length: '73%'
            },
            itemStyle: {
              color: "#8E939E",
            },
            detail: {
              show: false
            }
          },
          // 遮挡一半指针的小圆
          {
            name: lableName,
            label: {
              position: "center",
              formatter: '{a|{a}}',
              rich: {
                c: {
                  color: "#8E939E",
                  fontSize: 48,
                  fontWeight: "bold"
                },
                a: {
                  color: "rgba(92,255,240,1)",
                  fontSize: 24
                }
              }
            },
            type: "pie",
            data: [0],
            radius: [0, '51.8%'],
            animation: false,
            silent: true,
            color: "#6B6E7B",
            emphasis: {
              itemStyle: {
                color: "#6B6E7B"
              }
            },
            z: 2
          }
        ]
      })
      return Chart
    })
  },
  // 配置折线图
  getLineOption(data) {
    // 配置停机区域显示
    let markArea = [];
    let shutdownTime = data.shutdownTime || [];
    shutdownTime.forEach(item => {
      let name = [`开始时间：${item.timeLabS}`, `结束时间：${item.timeLabE}`, "描述：设备停机"];
      if (item.timeLabS === item.timeLabE) {
        markArea.push([{
          name: name.join("\n"),
          xAxis: item.timeLabS,
          emphasis: {
            label: {
              show: false
            },
            itemStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          itemStyle: {
            color: 'rgba(255,255,255,0.1)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.1)',
            borderType: 'solid'
          }
        }, {
          xAxis: item.timeLabE,
          emphasis: {
            label: {
              show: false
            },
            itemStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          itemStyle: {
            color: 'rgba(255,255,255,0.1)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.1)',
            borderType: 'solid'
          }
        }])
      } else {
        markArea.push([{
            name: name.join("\n"),
            xAxis: item.timeLabS,
            emphasis: {
              label: {
                show: false
              },
              itemStyle: {
                color: "rgba(255,255,255,0.1)"
              }
            },
            itemStyle: {
              color: "rgba(255,255,255,0.1)"
            }
          },
          {
            xAxis: item.timeLabE,
            emphasis: {
              label: {
                show: false
              },
              itemStyle: {
                color: "rgba(255,255,255,0.1)"
              }
            },
            itemStyle: {
              color: "rgba(255,255,255,0.1)"
            }
          },
        ])
      }
    })
    let legend = {
      data: [{
          name: '实时趋势性评估',
          textStyle: {
            color: '#C082FD',
            fontSize: 14
          }
        },
        {
          name: '实时稳定性评估',
          textStyle: {
            color: '#5EBAFF',
            fontSize: 14
          }
        },
      ],
    }
    
    let mychart = this.selectComponent("#mychart-dom-line");
    mychart.init((canvas, width, height) => {
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption({
        animation: false,
        legend: legend,
        grid: {
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          triggerOn: 'click',
          confine: true,
          extraCssText: "z-index:98",
          formatter: function(params) {
            var result = params[0].name;
            params.forEach(function(item) {
              result += "\n" + item.seriesName + ': ' + item.data;
            });
            return result;
          }
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#9095A5',
              fontSize: 12
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#9095A5'
            }
          },
          data: data.timeLab,
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#9095A5',
              fontSize: 13
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#9095A5'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#6B6E7B'
            }
          }
        }],
        series: [{
            animation: true,
            name: '实时趋势性评估',
            type: 'line',
            stack: '实时趋势性评估',
            areaStyle: {
              normal: {}
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#C082FD'
                }, {
                  offset: 0.2,
                  color: '#756997'
                }, {
                  offset: 0.6,
                  color: '#6f688d'
                }, {
                  offset: 1,
                  color: '#66647d'
                }]),
                lineStyle: {
                  color: '#C082FD'
                }
              }
            },
            markArea: {
              label: {
                show: false
              },
              data: markArea,
            },
            data: data.trendHealth
          },
          {
            animation: true,
            name: '实时稳定性评估',
            type: 'line',
            stack: '实时稳定性评估',
            areaStyle: {
              normal: {}
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#5EBAFF'
                }, {
                  offset: 0.2,
                  color: '#677d9d'
                }, {
                  offset: 0.6,
                  color: '#667c9b'
                }, {
                  offset: 1,
                  color: '#616a7d'
                }]),
                lineStyle: {
                  color: '#5EBAFF'
                }
              }
            },
            markArea: {
              label: {
                show: false
              },
              data: markArea,
            },
            data: data.stableHealth
          }
        ]
      })
      return Chart
    })
  },
  // 配置折线图
  getLineOptionDecro(data) {
    let xAxisData = [];
    if (data.health.length){
      data.health.forEach(item => {
        xAxisData.push("")
      })
    }
    
    let legend = {
      data: [{
        name: '健康度曲线',
        textStyle: {
          color: '#5cfff0',
          fontSize: 14
        }
      }]
    }
    let mychart = this.selectComponent("#mychart-dom-line");
    mychart.init((canvas, width, height) => {
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption({
        animation: false,
        legend: legend,
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          triggerOn: 'click',
          confine: true,
          extraCssText: "z-index:98",
          formatter: function(params) {
            var result = '实时健康度';
            params.forEach(function(item) {
              result += "\n" + item.seriesName + ': ' + item.data;
            });
            return result;
          }
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#8a8f9f',
              fontSize: 13
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#8a8f9f',
            }
          },
          data: xAxisData,
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#8a8f9f',
              fontSize: 13
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#8a8f9f'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#6B6E7B'
            }
          },
          max: 100
        }],
        series: [{
          animation: true,
          name: '健康度曲线',
          type: 'line',
          stack: '健康度曲线',
          areaStyle: {
            normal: {}
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#5cfff0'
              }, {
                offset: 0.2,
                color: '#5bc2bd'
              }, {
                offset: 0.6,
                color: '#5a7b83'
              }, {
                offset: 1,
                color: '#596a74'
              }]),
              lineStyle: {
                color: '#5cfff0'
              },
            }
          },
          data: data.health
        }]
      })
      return Chart
    })
  },
  
  // 配置折线图
  getLineOptionComac(data1, data2) {
    // 配置停机区域显示
    let markArea = [];
    let shutdownTime = data1.shutdownTime || [];
    shutdownTime.forEach(item => {
      let name = [`开始时间：${item.timeLabS}`, `结束时间：${item.timeLabE}`, "描述：设备停机"];
      if (item.timeLabS === item.timeLabE) {
        markArea.push([{
          name: name.join("\n"),
          xAxis: item.timeLabS,
          emphasis: {
            label: {
              show: false
            },
            itemStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          itemStyle: {
            color: 'rgba(255,255,255,0.1)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.1)',
            borderType: 'solid'
          }
        }, {
          xAxis: item.timeLabE,
          emphasis: {
            label: {
              show: false
            },
            itemStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          itemStyle: {
            color: 'rgba(255,255,255,0.1)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.1)',
            borderType: 'solid'
          }
        }])
      } else {
        markArea.push([{
            name: name.join("\n"),
            xAxis: item.timeLabS,
            emphasis: {
              label: {
                show: false
              },
              itemStyle: {
                color: "rgba(255,255,255,0.1)"
              }
            },
            itemStyle: {
              color: "rgba(255,255,255,0.1)"
            }
          },
          {
            xAxis: item.timeLabE,
            emphasis: {
              label: {
                show: false
              },
              itemStyle: {
                color: "rgba(255,255,255,0.1)"
              }
            },
            itemStyle: {
              color: "rgba(255,255,255,0.1)"
            }
          },
        ])
      }
    })
    let legend = {
      data: [{
          name: '实时趋势性评估',
          textStyle: {
            color: '#C082FD',
            fontSize: 14
          }
        },
        {
          name: '趋势性评估',
          textStyle: {
            color: '#5EBAFF',
            fontSize: 14
          }
        },
      ]
    }
    let mychart = this.selectComponent("#mychart-dom-line");
    mychart.init((canvas, width, height) => {
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption({
        animation: false,
        legend: legend,
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          triggerOn: 'click',
          confine: true,
          extraCssText: "z-index:98",
          formatter: function(params) {
            var result = params[0].name;
            params.forEach(function(item) {
              result += "\n" + item.seriesName + ': ' + item.data;
            });
            return result;
          }
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#9095A5',
              fontSize: 13
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#9095A5'
            }
          },
          data: data1.timeLab,
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#9095A5',
              fontSize: 13
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#9095A5'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#6B6E7B'
            }
          }
        }],
        series: [{
            animation: true,
            name: '实时趋势性评估',
            type: 'line',
            stack: '实时趋势性评估',
            areaStyle: {
              normal: {}
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#C082FD'
                }, {
                  offset: 0.2,
                  color: '#756997'
                }, {
                  offset: 0.6,
                  color: '#6f688d'
                }, {
                  offset: 1,
                  color: '#66647d'
                }]),
                lineStyle: {
                  color: '#C082FD'
                }
              }
            },
            markArea: {
              label: {
                show: false
              },
              data: markArea,
            },
            data: data1.trendHealth
          },
          {
            animation: true,
            name: '趋势性评估',
            type: 'line',
            stack: '趋势性评估',
            areaStyle: {
              normal: {}
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#5EBAFF'
                }, {
                  offset: 0.2,
                  color: '#677d9d'
                }, {
                  offset: 0.6,
                  color: '#667c9b'
                }, {
                  offset: 1,
                  color: '#616a7d'
                }]),
                lineStyle: {
                  color: '#5EBAFF'
                }
              }
            },
            markArea: {
              label: {
                show: false
              },
              data: markArea,
            },
            data: data2.trendMoveHealthToday
          },
        ]
      })
      return Chart
    })
  },
  // 配置折线图
  getLineOptionPgtj(data) {
    // 配置停机区域显示
    let markArea = [];
    let shutdownTime = data.shutdownTime || [];
    shutdownTime.forEach(item => {
      let name = [`开始时间：${item.timeLabS}`, `结束时间：${item.timeLabE}`, "描述：设备停机"];
      if (item.timeLabS === item.timeLabE) {
        markArea.push([{
          name: name.join("\n"),
          xAxis: item.timeLabS,
          emphasis: {
            label: {
              show: false
            },
            itemStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          itemStyle: {
            color: 'rgba(255,255,255,0.1)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.1)',
            borderType: 'solid'
          }
        }, {
          xAxis: item.timeLabE,
          emphasis: {
            label: {
              show: false
            },
            itemStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          itemStyle: {
            color: 'rgba(255,255,255,0.1)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.1)',
            borderType: 'solid'
          }
        }])
      } else {
        markArea.push([{
            name: name.join("\n"),
            xAxis: item.timeLabS,
            emphasis: {
              label: {
                show: false
              },
              itemStyle: {
                color: "rgba(255,255,255,0.1)"
              }
            },
            itemStyle: {
              color: "rgba(255,255,255,0.1)"
            }
          },
          {
            xAxis: item.timeLabE,
            emphasis: {
              label: {
                show: false
              },
              itemStyle: {
                color: "rgba(255,255,255,0.1)"
              }
            },
            itemStyle: {
              color: "rgba(255,255,255,0.1)"
            }
          },
        ])
      }
    })
    let legend = {
      data: [{
        name: '实时趋势性评估',
        textStyle: {
          color: '#5cfff0',
          fontSize: 14
        }
      }]
    }
    let mychart = this.selectComponent("#mychart-dom-line");
    mychart.init((canvas, width, height) => {
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption({
        animation: false,
        legend: legend,
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          triggerOn: 'click',
          confine: true,
          extraCssText: "z-index:98",
          formatter: function(params) {
            var result = params[0].name;
            params.forEach(function(item) {
              result += "\n" + item.seriesName + ': ' + item.data;
            });
            return result;
          }
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#8a8f9f',
              fontSize: 13
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#8a8f9f',
            }
          },
          data: data.timeLab,
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#8a8f9f',
              fontSize: 13
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#8a8f9f'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#6B6E7B'
            }
          },
          max: 100
        }],
        series: [{
          animation: true,
          name: '实时趋势性评估',
          type: 'line',
          stack: '实时趋势性评估',
          areaStyle: {
            normal: {}
          },
          markArea: {
            label: {
              show: false
            },
            data: markArea
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#5cfff0'
              }, {
                offset: 0.2,
                color: '#5bc2bd'
              }, {
                offset: 0.6,
                color: '#5a7b83'
              }, {
                offset: 1,
                color: '#596a74'
              }]),
              lineStyle: {
                color: '#5cfff0'
              }
            }
          },
          data: data.health
        }]
      })
      return Chart
    })
  },
}
})